<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo11</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    //同步组件：代码执行到组件位置，组件立即执行，不等待
    //异步组件：在调用组件时，这个组件不立即渲染，而是等带一些业务逻辑完成后，
    //          才会进行执行组件内的逻辑和渲染到页面上
    const app = Vue.createApp({
        template: ` 
        <div><tongbu /></div>
        `
    })
    //这种普通定义的组件都是同步组件
    app.component('tongbu',{
    template:`<div>JSPang.com</div>`
})
//这个是异步组件
app.component('async-component',Vue.defineAsyncComponent(()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve({
                template:`<div>这是一个异步组件</div>`
            })
        },3000)
    })

}))

    const vm = app.mount("#app")
</script>